import { Outlet } from "react-router-dom";
import { Layout, Menu } from "antd";
import { menuItems } from "./const";

import Settings from "../components/Settings";

const { Header, Content, Footer, Sider } = Layout;

export default function AltLayout() {
  return (
    <Layout style={{ minHeight: "100vh" }}>
      <Sider breakpoint="lg" collapsedWidth="0">
        <div className="demo-logo-vertical" />
        <Menu
          theme="dark"
          mode="inline"
          items={menuItems}
        />
      </Sider>
      <Layout>
        <Header style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
          <div className="demo-logo" />
          <Settings />
        </Header>
        <Content style={{ padding: "0 24px", margin: "24px 0" }}>
          <div style={{ background: "#fff", padding: 24, minHeight: 280 }}>
            <Outlet />
          </div>
        </Content>
        <Footer style={{ textAlign: "center" }}>
          &copy; 2025 My App. All rights reserved.
        </Footer>
      </Layout>
    </Layout>
  );
}